<include file="public@header" />
<style>
ul,li{
	list-style:none;
	margin:0;
	padding:0;
}
.choose_goods{
	width:100%;
	display:flex;
	flex-direction: row;
}
.goods_class{
	width:8%;
	background:#fff;
	padding-top:10px;
}
.goods_class ul{
	width:100%;
	display:flex;
	flex-direction: column;
}
.goods_class ul span{
	padding: 0px 10px;
}
.goods_class ul .hover span{
	color:red;
	border-right:5px solid red;
}
.goods_class ul li{
	line-height:40px;
	cursor:pointer;
}
/*商品信息*/
.goods_info{
	width:62%;
	padding:15px;
}
.goods_info ul,.goods_choose ul{
	border-radius:8px;
	width:98%;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	background:#fff;
	padding:15px;
}
.goods_info ul li{
	width:25%;
	display:flex;
	flex-direction: column;
	line-height:30px;
	align-items:center;
	justify-content: center;
	padding-bottom:10px;
	cursor:pointer;
}
.goods_info ul li p,.goods_choose ul li p{
	margin:0;	
}
.goods_info ul li img{
	max-width:85%;
	border-radius:5px;
}
.goods_choose ul{
	flex-direction: column;
}
.goods_choose ul li{
	width:100%;
	display:flex;
	flex-direction: row;
	line-height:30px;
	align-items:center;
	justify-content: space-between;
	border-bottom:1px solid #f2f2f2;
	padding:8px 0;
}
.goods_name{
	width:60%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipse;
}
.goods_num{
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content: center;
}
.goods_choose{
	width:25%;
	padding:15px;
}
.num_jian,.num_jia{
	font-size:24px;
	height:30px;
	width:30px;
	text-align:center;
	border-radius:50%;
	line-height:25px;
	border-radius:50%;
	background:#F7770D;
	border:1px solid #F7770D;
	color:#fff;
	user-select: none;
	cursor:pointer;
}
.num_jian.none,.num_jia.none{
	background:#c2c2c2;
	border:1px solid #C2C2C2;
}
.num{width:30px;text-align:center; font-weight:600; border:none;}
.end_btn{
	user-select: none;
	width: 80%;
    background-image: linear-gradient(to right,#FB783B,#FE8E01);
    color: #fff;
	letter-spacing:10px;
    height: 50px;
    text-align: center;
    margin: 0 auto;
    border-radius: 31px;
    line-height: 50px;
	cursor:pointer;
}
</style>
</head>
<body>
	<div class="wrap js-check-wrap">
		<ul class="nav nav-tabs">
			<li><a href="{:url('visual/register')}">{:lang('可视化墓区')}</a></li>
            <li><a href="{:url('visual/sale')}">墓位信息</a></li>
			<!--<li><a href="{:url('orders/buyer')}">申请人信息</a></li>-->
            <li><a href="{:url('visual/applyer')}">购墓人信息</a></li>
			<li><a href="{:url('visual/user')}">使用人信息</a></li>
            <li class="active"><a href="{:url('visual/chooseGoods')}">商品选购</a></li>
			<li><a href="{:url('visual/signContract')}">合同签订</a></li>
			<li><a href="{:url('visual/orderPay')}">订单支付</a></li>
		</ul>
		<form class="form-horizontal js-ajax-form" action="{:url('Admin/orders/edit_post')}" method="post">
        	<input type="hidden" name="order_id" value="" >
            <input type="hidden" name="ostatus" value="SHIPPING" >
			<fieldset style="background:#f2f2f2;">
            	<div class="choose_goods">
                	<div class="goods_class">
                    	<ul>
                        	<li class="hover"><span>装饰类</span></li>
                            <li><span>落葬类</span></li>
                            <li><span>鲜花类</span></li>
                            <li><span>祭扫类</span></li>
                        </ul>
                    </div>
                    <div class="goods_info">
                    	<ul>
                        	<li>
                            	<img src="__TMPL__/Public/assets/images/1.png">
                                <p>99支高品质玫瑰花束</p>
                                <p style="color:red;line-height:20px">￥1999.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/2.png">
                                <p>清新韩式混搭花束</p>
                                <p style="color:red;line-height:20px">￥999.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/3.png">
                                <p>小仙女专属洋桔梗花</p>
                                <p style="color:red;line-height:20px">￥1299.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/4.png">
                                <p>紫色满天星熊抱花束</p>
                                <p style="color:red;line-height:20px">￥1959.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/1.png">
                                <p>99支高品质玫瑰花束</p>
                                <p style="color:red;line-height:20px">￥1999.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/2.png">
                                <p>清新韩式混搭花束</p>
                                <p style="color:red;line-height:20px">￥999.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/3.png">
                                <p>小仙女专属洋桔梗花</p>
                                <p style="color:red;line-height:20px">￥1299.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/4.png">
                                <p>紫色满天星熊抱花束</p>
                                <p style="color:red;line-height:20px">￥1959.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/1.png">
                                <p>99支高品质玫瑰花束</p>
                                <p style="color:red;line-height:20px">￥1999.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/2.png">
                                <p>清新韩式混搭花束</p>
                                <p style="color:red;line-height:20px">￥999.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/3.png">
                                <p>小仙女专属洋桔梗花</p>
                                <p style="color:red;line-height:20px">￥1299.0</p>
                            </li>
                            <li>
                            	<img src="__TMPL__/Public/assets/images/4.png">
                                <p>紫色满天星熊抱花束</p>
                                <p style="color:red;line-height:20px">￥1959.0</p>
                            </li>
                        </ul>
                    </div>
                    <div class="goods_choose">
                    	<ul>
                        	<li>
                            	<div class="goods_name">
                                	<p>紫色满天星熊抱花束</p>
                                	<p style="color:red;line-height:20px">￥1959.0</p>
                                </div>
                                <div class="goods_num">
                                	<p class="num_jian" onClick="btnReduce(this,1)">-</p>
                                    <input class="num" id="num_1" value="1">
                                    <p  class="num_jia"  onClick="btnAdd(this,1)">+</p>
                                </div>
                            </li>
                            <li>
                            	<div class="goods_name">
                                	<p>紫色满天星熊抱花束</p>
                                	<p style="color:red;line-height:20px">￥1959.0</p>
                                </div>
                                <div class="goods_num">
                                	<p class="num_jian none" onClick="btnReduce(this,2)">-</p>
                                    <input class="num" id="num_2" value="1">
                                    <p  class="num_jia" onClick="btnAdd(this,2)">+</p>
                                </div>
                            </li>
                            <li>
                            	<div class="goods_name">
                                	<p>紫色满天星熊抱花束</p>
                                	<p style="color:red;line-height:20px">￥1959.0</p>
                                </div>
                                <div class="goods_num">
                                	<p class="num_jian" onClick="btnReduce(this,3)">-</p>
                                    <input class="num" id="num_3" value="1">
                                    <p  class="num_jia" onClick="btnAdd(this,3)">+</p>
                                </div>
                            </li>
                            <li>
                            	<div class="goods_name">
                                	<p>紫色满天星熊抱花束</p>
                                	<p style="color:red;line-height:20px">￥1959.0</p>
                                </div>
                                <div class="goods_num">
                                	<p class="num_jian" onClick="btnReduce(this,4)">-</p>
                                    <input class="num" id="num_4" value="1">
                                    <p  class="num_jia" onClick="btnAdd(this,4)">+</p>
                                </div>
                            </li>
                            <li style="align-items: flex-end;;flex-direction: column; border:none;">
                            	<p style="font-size:16px">合计：278.00</p>
                                <p style="color:red;">优惠：5.00</p>
                                <p style="font-size:18px; font-weight:600;color:red;">实付：273.00</p>
                            </li>
                            <li style="border:none;">
                            	<div class="end_btn">结账</div>
                            </li>
                        </ul>
                    </div>
                </div>
            	<!--<div>
                	<div style="margin-left:120px;width:25%;float:left">商品分类</div>
                	<div style="width:25%;float:left">商品</div>
					<div style="width:25%;float:left">数量</div>                    
                    <div class="btn btn-primary" id="add_goods">添加商品</div>
                </div>
                <div id="new_goods">
                </div>-->
                
			</fieldset>
            <!--<div style=" margin-left:75%; padding:20px 0px 0px 120px; color:#fc7b30; font-size:1.5rem">
            	合计：<span style=" font-style:italic">&yen;0</span>
            </div>
			<div class="form-actions">
            	<div class="btn btn-primary" id="check-btn">保存</div>
				<a class="btn" id="js-dialog-close"  href="{:url('orders/user')}">下一步</a>
			</div>-->
		</form>
	</div>
	<script type="text/javascript" src="__STATIC__/js/admin.js?v={:time()}"></script>
    
	<script type="text/javascript">
	//切换分类
	$('.goods_class ul li').click(function(){
		var index = $(".goods_class ul li").index(this);	
		$('.goods_class ul li').eq(index).addClass("hover").siblings().removeClass("hover");
		//ajax请求去获取对应分类的信息
		
	})
	//增减数量
	function btnAdd(info,index){
		$(info).siblings().removeClass("none");		
		//1、获取#num的value
		var value = document.getElementById("num_"+index).value;
		//2、将取出来的值做+1操作，再赋值给#num的value
		value = Number(value) + 1;
		document.getElementById("num_"+index).value=value;
	}

	function btnReduce(info,index){
		//console.log(info);
		//1、获取#num的值
		var value = Number(document.getElementById("num_"+index).value);
		//2、判断#num的值是否小于等于1，如果小于等于1的话，则将值改为1
		//3、否则，可以实现 - 1 操作
		if(value <= 1){
			value = 1;
			$(info).addClass("none");
		}else{
			value -= 1;
			if($(info).hasClass("none")){
				$(info).removeClass("none");
			}
			
		}
		//4、将 value 的值赋值给 #num
		document.getElementById("num_"+index).value = value;
	}
	 // 提交订单
	$("#check-btn").click(function(){
		$.post($("form").attr('action'), $("form").serialize(), function(result){
			if(result.state == 'success'){
				alert("保存成功！");
				$('#js-dialog-close').click();
			} else {
				alert(result.info);
			}
		}, 'json');
	});
	
	// 添加使用人
	$("#add_goods").click(function(){
		var str = "<div name='now_user'><div >"+
                    "<div class='controls' style='width:100%; margin-left:120px; margin-top:10px;float:left'>"+
                    	"<div style='width:20%; margin-right:5%; float:left'><select><option></option></select></div>"+
                    	"<div style='width:20%; margin-right:5%; float:left'><select><option></option></select></div>"+
						"<div style='width:20%; margin-right:5%; float:left'><input type='text' style='width:50%;'/></div>"+
						"<div class='btn btn-primary' name='del_user' style=' float:left'>移除</div>"+
                    "</div>"+
				"</div>";
		$("#new_goods").append(str);
	});
	// 删除使用人
	$(document).on("click","[name='del_user']",function(){
		$(this).parents("div[name='now_user']").remove();
	})
    </script>

</body>
</html>